<template>
    <el-card :style="{'margin-bottom': props.formConfig.cardMarginBottom ? props.formConfig.cardMarginBottom : '1rem'}">
        <template #header>
            数据搜索
        </template>
        <el-form :model="headerSearch" 
            ref="refForm"
            :label-position="props.formConfig.labelPosition ?? 'right'"
            :label-suffix="props.formConfig.labelSuffix ?? ''" 
            :size="props.formConfig.size ?? 'default'" 
            style="width: 100%"
            :label-width="props.formConfig.labelWidth ?? '100px'">
            <el-row :gutter="props.formConfig.rowGutter ?? 16">
                <el-col v-for="item in props.formItemList" :key="item.prop" :xs="item.xs ?? 24" :sm="item.sm ?? 24" :md="item.md ?? 12" :lg="item.lg ?? 6" :xl="item.xl ?? 6">
                    <el-form-item :label="item.label" :prop="item.prop">
                        <el-input v-model="headerSearch[item.prop]" :placeholder="item.placeholder ?? '请输入'" v-if="item.inputType === 'input'" style="width: 100%" />
                        <el-select v-model="headerSearch[item.prop]" :placeholder="item.placeholder ?? '请选择'" v-if="item.inputType === 'select'" style="width: 100%">
                            <el-option v-for="key in item.option" :value="key.value" :key="key.value" :label="key.label" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="props.formConfig.xs ?? 24" :sm="props.formConfig.sm ?? 24" :md="props.formConfig.md ?? 12" :lg="props.formConfig.lg ?? 6" :xl="props.formConfig.xl ?? 6">
                    <el-button type="primary" :loading="props.searchButtonLoading" :icon="Search" @click="searchSubmit">搜 索</el-button>
                    <el-button :icon="Refresh" @click="resetSubmit">重 置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>

<script  setup>
import { Search, Refresh } from '@element-plus/icons-vue'
const props = defineProps({
    formConfig: {
        type: Object,
        default: {}
    },
    formItemList: {
        type: Array,
        default: []
    },
    searchButtonLoading: {
        type: Boolean,
        default: false
    }
})
const headerSearch = reactive({})
const getSearchObjKeyValue = (arr) => {
    const obj = {}
    if (Array.isArray(arr) && arr.length > 0) {
        arr.map(item => {
            obj[item.prop] = obj[item.defaultVal] ?? ''
        })
    }
    return obj
}
const emit = defineEmits(['searchSubmit'])
const searchSubmit = () => {
    emit('searchSubmit', headerSearch)
}
const resetSubmit = () => {
    refForm.value.resetFields()
    emit('searchSubmit', {})
}
const refForm = ref(null)
onMounted(() => {
    getSearchObjKeyValue(props.formItemList)
})
</script>